$cdnDomain: '//cdn.shijue.me';
@import "./flexbox";

@mixin lyby_closeable($width : 24px,$bgcolor : #5a5a5a) {
  position: relative;
  cursor: pointer;
  width: $width+3;
  height: $width+3;
  font-size: 0;
  @include borderRadius(3px);
  @include lyby_donghua();
  &:hover{
    background-color: rgba(90, 90, 90, 0.4);
  }
  &:before{
    position: absolute;
    content: '.';
    display: block;
    width: $width;
    height: 2px;
    top : $width/2;
    left : 1.5px;
    background: $bgcolor;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
  &:after {
    position: absolute;
    content: '.';
    display: block;
    width: $width;
    height: 2px;
    top : $width/2;
    left : 1.5px;
    background: $bgcolor;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
}
@mixin process(){
  opacity: 0;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  @include lyby_donghua();
  &.u_pic_uploadStatus_1{
    opacity: 1;
  }
  .progress-content{
    .progress-title{
      text-align: center;
      font-size: 16px;
      color: #ec5c5c;
      line-height: 27px;
    }
    .progress-bar{
      padding: 1px;
      background:rgba(203,203,203,0.6);
      @include borderRadius(10px);
      .percent{
        background-color: #ec5c5c;
        height: 5px;
        @include borderRadius(5px)
      }
    }
  }
}

@mixin backgroundCommon(){
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

@mixin danChu() {
  @include transitionAttr(opacity, 200);
  &:hover {
    opacity: 0.5;
  }
}
@mixin zuoyoubuju($leftWidth : 220px , $height : auto){
  height:$height;
  &:after{
    content: " ";
    display: block;
    clear: both;
    height: 0;
  }
  .left{
    height: 100%;
    position: relative;
    margin-right: -$leftWidth;
    width: $leftWidth;
    //background-color: red;
  }
  .right{
    height: 100%;
    width:100%;
    padding-left:$leftWidth;
    //background-color: blue;
  }
}
@mixin boxSizing() {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
@mixin rotate($deg) {
  transform: rotate(#{$deg}deg);
  -webkit-transform: rotate(#{$deg}deg);
  -moz-transform: rotate(#{$deg}deg);
}
@mixin transitionAttr($attr, $second) {
  transition: #{$attr} #{$second}ms ease-out 0s;
  -webkit-transition: #{$attr} #{$second}ms ease-out 0s;
  -mos-transition:#{$attr} #{$second}ms ease-out 0s;
  -o-transition: #{$attr} #{$second}ms ease-out 0s;
}
@mixin borderRadius($radius) {
  border-radius: #{$radius};
  -webkit-border-radius: #{$radius};
  -moz-border-radius: #{$radius};
  -o-border-radius: #{$radius};
}
@mixin lyby_left_calc($calc) {
  left: calc(#{$calc});
  left: -webkit-calc(#{$calc});
  left: -moz-calc(#{$calc});
}
@mixin lyby_height_calc($calc) {
  height: calc(#{$calc});
  height: -webkit-calc(#{$calc});
  height: -moz-calc(#{$calc});
}

@mixin lyby_width_calc($calc) {
  width: calc(#{$calc});
  width: -webkit-calc(#{$calc});
  width: -moz-calc(#{$calc});
}

@mixin lyby_max_width_calc($calc) {
  max-width: calc(#{$calc});
  max-width: -webkit-calc(#{$calc});
  max-width: -moz-calc(#{$calc});
}

@mixin lyby_ellipsis(){
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

@mixin lyby_position_center(){
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

@mixin lyby_position_h_center($top){
  position: absolute;
  top:#{$top};
  left:50%;
  transform: translateX(-50%);
}

@mixin lyby_donghua($miao:.2s){
  -webkit-transition: all $miao;
  -moz-transition: all $miao;
  transition: all $miao;
}

@mixin lyby_aLink($linkColor : #f36478){
  -webkit-transition: opacity 0.2s ease-out, color 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out, color 0.2s ease-out;
  transition: opacity 0.2s ease-out, color 0.2s ease-out;
  &:link {
    color: $linkColor
  }
  &:visited{
    color : $linkColor
  }
  &:hover{
    color : $linkColor - 20
  }
}

@mixin absoluteCenter() {
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

@mixin lyby_shadow() {
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}